<template>
	<uni-header title="银行卡"></uni-header>
	<view class="list">
		<uni-empty v-if="emptyState==2"></uni-empty>
		<view class="item" @click="bankDetail(item.id,item)" v-for="item in list" @longpress="del(item)">
			<!-- <text class="title">{{item.bankName}}</text> -->
			<view class="num-list">
			<!-- 	<view class="zw">
					<text v-for="item in 4"></text>
				</view>
				<view class="zw">
					<text v-for="item in 4"></text>
				</view>
				<view class="zw">
					<text v-for="item in 4"></text>
				</view> -->
				<view class="num">
					<text v-for="s in item.bankCardNo">{{s}}</text>

				</view>
			</view>
		</view>
	</view>
	<button class="submit" @click="bankDetail('')" v-if="!props.state">添加提现地址</button>
</template>

<script setup>
	import {
		bankList,
		bankDelete
	} from '@/util/api.js'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		onMounted,
		ref
	} from "vue";
	const list = ref([])
	const emptyState = ref(0)
	const props = defineProps(['state'])
	onShow(() => {
		getList()
		
	})
	const getList = async () => {
		const result = await bankList()
		
		list.value = result.data
		if (list.value.length == 0) {
			emptyState.value = 2
		} else {
			emptyState.value = 1
		}


	}
	const bankDetail = (id,item) => {
		if(props.state){
			uni.navigateBack()
			uni.$emit("bank",item)
		}else{
			uni.navigateTo({
				url: "/pages/bankDetail/bankDetail?id=" + id
			})
		}
		
	}
	const del = (item) => {
		if(props.state) return false;
		uni.showModal({
			title: '提示',
			content: '是否删除该地址',
			async success(res) {
				if (res.confirm) {
					await bankDelete(item.id)
					getList()
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		});
	}
</script>

<style lang="scss" scoped>
	.null {
		width: 100%;
		height: 300rpx;
		text-align: center;

		text {
			line-height: 300rpx;
			display: block;
			font-size: 48rpx;
		}
	}

	.submit {
		width: 686rpx;
		height: 92rpx;
		background: #F2F4FA;
		border-radius: 16rpx;
		display: block;
		margin: 32rox auto;
		color: #1E53E7;
		font-size: 32rpx;
		line-height: 92rpx;
	}

	.submit::after {
		border: none;
	}

	.list {
		width: 686rpx;
		margin: 0 auto;

		.item {
			width: 686rpx;
			height: 156rpx;
			background: #E8EBF5;
			border-radius: 24rpx;
			margin-bottom: 32rpx;
			overflow: hidden;

			.title {
				color: #181D29;
				font-size: 32rpx;
				font-weight: 500;
				display: block;
				margin: 32rpx 0 0 48rpx;
			}

			.num-list {
				display: flex;
				align-items: center;
				margin: 0 0 0 48rpx;

				

				.num {
					display: flex;
					align-items: center;

					text {
						color: #181D29;
						font-size: 28rpx;
						font-weight: 500;
						display: block;
						
						line-height: 156rpx;
					}

					text:nth-of-type(4) {
						margin-right: 0;
					}
				}
			}
		}
	}
</style>